<template>
  <div class="edit_mobile">
    <div class="mobile_old" v-if="phoneItem && phoneItem">
      <input type="text" :placeholder="`原手机号:${phoneItem.substr(0, 7) + '****'}`" disabled />
    </div>
    <!-- <div class="mobile_old">
      <input
        type="text"
        placeholder="请输入验证码"
        v-model="userPhone.oldPhoneNumberCode"
      />
      <span class="changeHanld" @click="SendCode" v-show="!showcount"
        >发送验证码</span
      >
      <span class="changeHanld" v-show="showcount"
        >{{ countDown }}秒后再发送</span
      >
    </div>-->
    <div class="mobile_new">
      <input type="text" placeholder="请输入新手机号" v-model="userPhone.newPhoneNumber" />
    </div>
    <div class="mobile_new">
      <input type="text" placeholder="请输入验证码" v-model="userPhone.newPhoneNumberCode" />
      <span class="changeHanld" @click="newSendCode" v-show="!showCurrent">发送验证码</span>
      <span class="changeHanld" v-show="showCurrent">{{ newCountDownCode }}秒后再发送</span>
    </div>
    <button
      v-if="!userPhone.newPhoneNumber || !userPhone.newPhoneNumberCode"
      style="cursor: not-allowed"
    >提交</button>
    <button
      class="changeHanld active"
      @click="submitFrom"
      v-if="userPhone.newPhoneNumber && userPhone.newPhoneNumberCode"
    >提交</button>
  </div>
</template>

<script>
import { postRequest, commonRequest } from "../../../api/api.js";

export default {
  props: ["phoneItem"],
  data() {
    return {
      str: "",
      countDown: 60, // 倒计时
      showCurrent: false, // 新手机:是否显示手机号码
      newCountDownCode: 60, // 新手机号码倒计时
      userPhone: {
        newPhoneNumber: "", // 新的手机
        newPhoneNumberCode: "" // 新的手机验证码
      }
    };
  },
  mounted() {
    // this.changeNumber();
  },
  methods: {
    //  点击发送
    submitFrom() {
      postRequest(
        "/api/ums/umsUsers/updatePhoneNumber?newPhoneNumber=" +
          this.userPhone.newPhoneNumber +
          "&" +
          "newPhoneNumberCode=" +
          this.userPhone.newPhoneNumberCode
      ).then(res => {
        if (res.code == 500) {
          this.$message({
            type: "warning",
            message: "修改失败"
          });
        } else {
          this.$message({
            type: "success",
            message: "修改成功"
          });
        }
        this.$emit("isControlMobile");
        this.userPhone.newPhoneNumber = ""; // 新手机号码的值为空
        this.userPhone.newPhoneNumberCode = ""; // 清空验证码的值
      });
    },
    // 新手机号码
    newSendCode() {
      if (this.userPhone.newPhoneNumber) {
        this.sendCodefn(this.userPhone.newPhoneNumber);
      } else {
        this.$message({
          type: "warning",
          message: "请输入新的手机号码"
        });
      }
    },

    // 点击发送验证码请求
    sendCodefn(val) {
      let times = null; // 清除定时器
      commonRequest("/api/ums/umsUsers/sendVerificationCode", {
        phoneNumber: val,
        type: "UpdatePhoneNumber"
      }).then(res => {
        if (res.code == 500) {
          this.$message({
            type: "warning",
            message: res.message
          });
        } else {
          times = setInterval(() => {
            this.newCountDownCode--;
            this.showCurrent = true;
            if (this.newCountDownCode == 0) {
              clearInterval(times);
              this.showCurrent = false;
            }
          }, 1000);

          this.$message({
            type: "success",
            message: "发送成功,请注意查收"
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.edit_mobile {
  padding: 0 30px 10px;

  div {
    width: 280px;
    height: 40px;
    border-bottom: 1px solid #ccc;
    margin-top: 10px;
    display: flex;
    align-items: center;

    span {
      width: 100%;
      margin-left: 10px;
      color: #44a2ff;
      font-size: 12px;
      display: flex;
      justify-content: center;
    }
    input {
      font-size: 16px;
    }
  }
  button {
    width: 100%;
    height: 40px;
    background-color: #ccc;
    margin: 15px auto 0;
    border-radius: 6px;
    color: #fff;
    &.active {
      background-color: #44a2ff;
      color: #fff;
    }
  }
}
</style>
